setTimeout(function () {
    console.log("callback output")
}, 2000)
console.log("global output")
function changeText() {
    document.querySelector("h1").textContent = "output from callback"
}
setTimeout(changeText, 2000)

const timerId = setTimeout(changeText, 3000);
document.querySelector("#cancelButton").addEventListener("click", function () {
    clearTimeout(timerId);
    console.log("timer ID:", timerId)
    console.log("timer has been canceled")
})

let intervalID = setInterval(myCallback, 1000);
function myCallback() {
    console.log(Date.now())
}
function stopChange() {
    clearInterval(intervalID)
}
document.getElementById("stop").addEventListener("click", stopChange)
{
    let intervalID = setInterval(myCallback, 1000, "你好")
}
function myCallback(a) {
    console.log(a, Date.now());
}

{
    let intervalID;

    function startChange() {
        if (!intervalID) {
            intervalID = setInterval(changeColor, 1000);
        }
    }


}
function changeColor() {
    if (document.body.style.backgroundColor !== "black") {
        document.body.style.backgroundColor = "black";
        document.body.style.color = "white";
    } else {
        document.body.style.backgroundColor = "white";
        document.body.style.color = "black";
    }
}
document.getElementById("start").addEventListener("click", startChange);
function changeRandomColor() {
    const randomColor = Math.floor(Math.random() * 16777215).
        toString(16);
    document.body.style.backgroundColor = `#${randomColor}`;
}
intervalID = setInterval(changeRandomColor, 1000);
document.querySelector("button").addEventListener("click", toggle);
function toggle(e) {
    e.target.classList.toggle("danger");
}
const posts = [
    { title: "帖⼦⼀", body: "这是帖⼦⼀" },

    { title: "帖⼦⼆", body: "这是帖⼦⼆" }
];
function getPosts() {
    setTimeout(() => {
        posts.forEach((post) => {
            const div = document.createElement("div");
            div.innerHTML = `<h3>${post.title}</h3><p>${post.
                body}</p>`;
            document.querySelector("#posts").appendChild(div);
        });
    }, 1000);
}

getPosts();

function createPost(post, cb) {
    setTimeout(() => {
        posts.push(post);
        cb();
    }, 2000);
}
createPost({ title: "帖⼦三", body: "这是帖⼦三" }, getPosts);
{
    let xhr = new XMLHttpRequest();
    xhr.open('GET', './movies.json');
    xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            // console.log(JSON.parse(this.responseText));
            const data = JSON.parse(this.responseText);
            data.forEach((movie) => {
                const li = document.createElement('li');
                li.innerHTML = `<strong>${movie.name}</strong> - ${movie.year}`;
                document.querySelector('#results').appendChild(li);
            });
        }
    };
    xhr.send();
}

const jokeEl = document.getElementById('joke');
const jokeBtn = document.getElementById('joke-btn');

const generateJoke = () => {
    console.log('123');
};
jokeBtn.addEventListener('click', generateJoke);
//    const xhr = new XMLHttpRequest();
{
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.chucknorris.io/jokes/random',
        true);
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status === 200) {
                const joke = JSON.parse(this.responseText).value;
                jokeEl.innerHTML = joke;
            } else {
                jokeEl.innerHTML = '出现错误，不好笑。';
            }
        }
    };
    xhr.send()
}
document.addEventListener('DOMContentLoaded', generateJoke)
{
    let XHR = new XMLHttpRequest();
    XHR.open('GET', 'https://api.chucknorris.io/jokes/random1')
function getData(endpoint) {
    const XHR = new XMLHttpRequest();
    XHR.open("GET", endpoint);
}
XHR.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        console.log(JSON.parse(this.responseText));
    }
};
setTimeout(() => {
    XHR.send();
}, Math.floor(Math.random() * 3000) + 1000);
// getData("./movies.json")
function getData(endpoint, cb) {
    const XHR = new XMLHttpRequest();
    XHR.open("GET", endpoint);
    XHR.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            cb(JSON.parse(this.responseText));

        }
    };
    setTimeout(() => {
        XHR.send();
    }, Math.floor(Math.random() * 3000) + 1000);
}
getData("./movies.json", (moviesData) => {
    console.log(moviesData);
    getData("./actors.json", (actorsData) => {
        console.log(actorsData);
        getData("./directors.json", (directorsData) => {
            console.log(directorsData);
        });
    });
});
}